<!-- 百人(Luck49) -->
<template>
  <el-dialog v-if="show" :modelValue="show" :title="GameName(indexStore.gameArray, 100003) + $t('381')" class="hund-dialog" top="10vh"
    :close-on-click-modal="false" :close-on-press-escape="false" @close="onHideDetails">
    <el-form :model="data" class="addQuery" ref="addQuery" :validate-on-rule-change="false"
      :disabled="isDisableUser">
      <form-item :title="t('41')" value="game_name">
        <div class="gameIcon">
          <div class="flex marginR5">
            <el-tag size="small">{{ GamePlatform(indexStore.gameArray, 100003) }}</el-tag>
            <img class="game-icon" :src="selectToLabel(GAMEICON, 100003)" alt="">
          </div>
          {{ GameName(indexStore.gameArray, 100003) }}
        </div>
      </form-item>
      <form-item :title="$t('249')" :pass="true" value="a_hundred_profitmargin">
        <el-select v-model="data.a_hundred_other_details.a_hundred_profitmargin" filterable>
          <el-option v-show="item" v-for="item in 3" :label="item + '%'" :value="item" />
        </el-select>
        <div class="input-text">{{ $t('520') }}</div>
      </form-item>
      <form-item :title="$t('513')" :pass="true" value="a_hundred_prebetting">
          <el-select v-model="data.a_hundred_other_details.a_hundred_prebetting" filterable>
            <el-option :label="10" :value="10" />
            <el-option :label="20" :value="20" />
            <el-option :label="30" :value="30" />
            <el-option :label="40" :value="40" />
            <el-option :label="50" :value="50" />
          </el-select>
        <div class="input-text">{{ $t('515') }}</div>
      </form-item>
      <form-item :title="$t('555')" :pass="true" value="a_hundred_repeat">
        <div class="flex margin5" v-for="(item, index) in data.repeatList" :key="index">
          {{$t('556')}}:
          <el-input-number :min="0" :max="99999999999999999999" :precision="0" class="width150 marginR10" v-model="item.min"
            :placeholder="$t('557')" clearable controls-position="right" />
            {{$t('558')}}:
          <el-input-number :min="0" :max="item.min" :precision="0" class="width150" v-model="item.max"
          :placeholder="$t('559')" clearable controls-position="right" />
        </div>
        <div class="input-text tipsTextRed">({{$t('560')}})</div>
      </form-item>
      <form-item :title="$t('44')" class="yxxz-item" :pass="true" value="a_hundred_stake">
        <div class="flexWrap margin5" v-for="(item, index) in data.pressureList" :key="index">
          <div>{{ $t('253') }} </div>
          <el-input-number size="large" v-model="item.min":precision="2"
            class="marginT10" clearable controls-position="right" />
          <div class="input-text">{{ $t('254') }}</div>
          <div>{{ $t('255') }} </div>
          <el-input-number size="large" v-model="item.max" :precision="2"
            class="marginT10" clearable controls-position="right" />
          <div class="input-text">{{ $t('256') }}</div>
        </div>
      </form-item>
      <form-item :title="$t('509')" :pass="true" value="rebate">
        <el-radio-group v-model="data.rebate" size="large">
          <el-radio-button :label="$t('101')" :value="1" />
          <el-radio-button :label="$t('102')" :value="0" />
        </el-radio-group>
        <div class="input-text">{{ $t('516') }}</div>
      </form-item>
      <form-item :title="$t('510')" value="a_hundred_rebate" :subtract="!props.isDisableUser" @addItem="addRebate">
        <div class="flexWrap margin5" v-for="(item, index) in data.rebateList" :key="index">
          {{$t('512')}}:
          <el-input-number v-model="item.max" :min="-99999999999999999999" :max="99999999999999999999" :precision="4"
            class="width150 marginR5" :placeholder="$t('512')" clearable :controls="false" />
          {{$t('511')}}:
          <el-input-number v-model="item.min" :min="-99999999999999999999" :max="99999999999999999999" :precision="4"
            class="width200 marginR5" :placeholder="$t('511')" clearable :controls="false" />
          <div v-show="!props.isDisableUser" class="reduce-btn marginL5" @click="reduceRebate(index)">-</div>
        </div>
        <div class="input-text">{{ $t('517')}},<span class="tipsTextRed">{{ $t('514') }}</span></div>
      </form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button @click="onHideDetails">{{ $t('240') }}</el-button>
        <el-button type="primary" @click="save">{{ $t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import FormItem from '@/components/FormItem/FormItem.vue'
import { getHundredConfig, updateHundredConfig } from '@/api/settion'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { GAMEICON } from '@/config/eunm'
import { throttle,selectToLabel, GamePlatform, GameName } from '@/utils/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      chooseOperator(props.checkedItem.agent_id, props.checkedItem.game_id) // 获取运营商配置
    }
  }
)

const data = reactive({
  id: 0,
  game_id: 0,
  agent_id: 0,
  game_name: '',
  operated_id: 0,
  a_hundred_num: 0, // 房间最大人数
  pool: 0,// 游戏水位
  a_hundred_other_details: {
    a_hundred_profitmargin: 0, // 利润率
    a_hundred_stake: '', // 押注金额
    a_hundred_poolstart: 0, // 初始水位
    a_hundred_prebetting: 0, // 预下注期数
    a_hundred_odds: 0, // 单个赔率（赔率过高会导致模型崩溃）
    a_hundred_pool: '', // 水位配置
    a_hundred_repeat: '', // 连续判定避重(判定重复局数，出现数字个数)
    a_hundred_rebate: '', // 返奖(开关【1开，其余值关】;流水1，返奖额度1;流水2，返奖额度2;……)
  },
  pressureList: [{ min: 0,max: 0 }], // 押注金额
  repeatList: [{ min: 0,max: 0 }], // 连续判定避重
  rebate: 0, // 返奖(开关【1开，其余值关】)
  rebateList: [] as any[], // 返奖配置
})

// 选择运营商
const chooseOperator = async (id: number, game_id: number) => {
  let res = await getHundredConfig({ agent_id: id, game_id: game_id });
  Object.assign(data, res.data)
}

const addQuery = ref<FormInstance>()
const save = throttle(async () => {
  if (!addQuery.value) return
  await addQuery.value.validate(async (valid, fields) => {
    if (valid) {
      await Promise.all([updateHundredConfig(data)])
      ElMessage({
        message: t('342'),
        type: 'success'
      })
      onHideDetails()
    }
  })
}, 3000)

// 玩家返奖配置
const addRebate = () => {
  if(data.rebateList.length>7){
    return ElMessage.error(t('514'))
  }
  data.rebateList.push({ min: 0, max: 1 })
}
const reduceRebate = (index:number) => {
  data.rebateList.splice(index, 1)
}


// 取消
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.xz-label {
  width: 220px;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0 0 10px
}
</style>
<style lang="scss">
.hund-dialog .el-dialog__body {
  height: 650px;
  overflow: auto
}
</style>
